<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改商品类别')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-type-edit" th:object="${goodsType}">

            <!--<form id="addForm" role="form" class="form-horizontal parsley-form" data-parsley-validate-->
            <!--action="${base!}/platform/goods/type/editDo" method="post">-->
            <input type="hidden" id="id" name="id" th:value="*{id}" value="">

            <div class="wrapper" style="min-height:500px;">
                <div class="box-tab">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#base" data-toggle="tab">基本设置</a>
                            <!--</li>-->
                            <!--<li><a href="#props" data-toggle="tab">扩展属性</a>-->
                        </li>
                        <li><a href="#spec" data-toggle="tab">规格</a>
                        </li>
                        <li><a href="#params" data-toggle="tab">详细参数表</a>
                        </li>
                    </ul>
                    <div class="tab-content text-center">
                        <div class="tab-pane fade active in" id="base">
                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="name" class="col-sm-2 control-label">类型名称</label>
                                    <div class="col-sm-8">
                                        <input type="text" id="name" class="form-control" name="name" data-parsley-required="true"
                                               th:value="${goodsType.name}" value="" placeholder="类型名称">
                                    </div>
                                </div>
                                <!-- <div class="form-group">
                                    <label for="brand" class="col-sm-2 control-label">关联品牌</label>

                                    <div class="col-sm-8" id="brand">
                                        <div style="float: left;height: 35px;line-height: 35px;">
                                            <span th:each="bList : ${brandList}" >
                                                <input type="checkbox" th:value="${bList.id}" name="brand" value="">
                                                <span th:text="${bList.name}"></span>
                                            </span>
                                        </div>
                                    </div>
                                </div> -->
                            </div>
                        </div>
                        <div class="tab-pane fade" id="spec">
                            <div class="form-group">
                                <div class="col-sm-2">
                                    <button id="specAdd" type="button" class="btn btn-primary"><i class="fa fa-plus mr5"></i>选择规格</button>

                                </div>
                                <div class="col-sm-8">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="specTab" class="col-sm-2 control-label"></label>
                                <div class="col-sm-8">
                                    <table id="specTab" width="100%" border="0" cellspacing="0" cellpadding="0" >
                                        <thead>
                                        <tr align="center">
                                            <td>规格名称</td>
                                            <td>规格值</td>
                                            <td width="2"></td>
                                            <td>操作</td>
                                        </tr>
                                        </thead>
                                        <TBODY>                  　

                                        <!--<tr align="center" th:each="props : ${specList}">-->
                                        <!--<td height="45">-->
                                        <!--<input type="hidden" name="specId" class="form-control" th:value="${props.specId}"><div class="specName"><span >${o.spec.name!}</span></div></td>-->
                                        <!--<td><input type="hidden" name="specValIds" class="form-control"-->
                                        <!--value="<%for(k in o.specValList){%>${k.specValueId!},<%}%>">-->
                                        <!--<input-->
                                        <!--type="text" name="specValText"-->
                                        <!--value="<%for(k in o.specValList){%>${k.specValText!},<%}%>"-->
                                        <!--class="form-control" style="width: 200px;" readonly>-->
                                        <!--</td>-->

                                        <!--<td width="2"></td>-->
                                        <!--<td><i class="up fa fa-arrow-up" style="cursor:pointer;padding: 5px;" title="向上移动"></i>-->
                                        <!--<i class="down fa fa-arrow-down" style="cursor:pointer;padding: 5px;" title="向下移动"></i>-->
                                        <!--<i class="del fa fa-remove" style="cursor:pointer;padding: 5px;" title="删除"></i></td>-->
                                        <!--</tr>-->
                                        </TBODY>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="params">

                            <div class="form-group">
                                <div class="col-sm-2">
                                    <button id="dialogParamAdd" type="button" class="btn btn-primary"><i class="fa fa-plus mr5"></i>添加选项参数值</button>
                                </div>
                                <div class="col-sm-8">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="dialogParamTab" class="col-sm-2 control-label"></label>
                                <div class="col-sm-8">
                                    <table id="dialogParamTab" width="100%" border="0" cellspacing="0" cellpadding="0" >
                                        <thead>
                                        <tr align="center">
                                            <td>选项值</td>
                                            <td width="2"></td>
                                            <td>操作</td>
                                        </tr>
                                        </thead>
                                        <TBODY>                  　
                                        　
                                        </TBODY>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <!--<div class="tab-pane fade" id="mytab">-->
                        <!--<div class="form-group">-->
                        <!--<div class="col-sm-2">-->
                        <!--<button id="tabAdd" type="button" class="btn btn-default"><i class="fa fa-plus mr5"></i>添加标签</button>-->

                        <!--</div>-->
                        <!--<div class="col-sm-8">-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--<div class="form-group">-->
                        <!--<label for="tabTab" class="col-sm-2 control-label"></label>-->
                        <!--<div class="col-sm-8">-->
                        <!--<table id="tabTab" width="100%" border="0" cellspacing="0" cellpadding="0" >-->
                        <!--<thead>-->
                        <!--<tr align="center">-->
                        <!--<td align="center" width="120">标签名称</td>-->
                        <!--<td align="center">编辑内容</td>-->
                        <!--<td align="center"></td>-->
                        <!--<td align="center">操作</td>-->
                        <!--</tr>-->
                        <!--</thead>-->
                        <!--<TBODY>                  　-->
                        <!--　  <%for(o in obj.tabList){%>-->
                        <!--<tr align="center"><td height="45">-->
                        <!--<input type="text" name="tab_name" value="${o.name!}" class="form-control" style="width: 150px;" data-parsley-required="true"></td>-->
                        <!--<td><button type="button" class="btn btn-default"><i class="fa fa-plus mr5"></i>编辑内容</button></td>-->
                        <!--<td><input type="hidden" name="tab_note" value="${o.note!}" class="form-control" style="width: 80px;" readonly></td>-->
                        <!--<td><i class="up fa fa-arrow-up" style="cursor:pointer;padding: 5px;" title="向上移动"></i>-->
                        <!--<i class="down fa fa-arrow-down" style="cursor:pointer;padding: 5px;" title="向下移动"></i>-->
                        <!--<i class="del fa fa-remove" style="cursor:pointer;padding: 5px;" title="删除"></i></td></tr>-->
                        <!--<%}%>-->
                        <!--</TBODY>-->
                        <!--</table>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />


    <script language="JavaScript" th:inline="javascript">

        var strSpc ='';
        for (o in [[${specList}]]){

            var specValIds ='';
            var specValText ='';
            var specValList = [[${specList}]][o].typeSpecValueDtoList;
            for(p in  specValList){
                specValText +=specValList[p].value +',';
                specValIds += specValList[p].specValueId + ",";
            };
            strSpc +='<tr align="center">' +
                '<td height="45">' +
                '<input type="hidden" name="specId" class="form-control" value="'+[[${specList}]][o].specId+'">' +
                '<div class="specName">'+[[${specList}]][o].goodsSpec.name+'</div></td>' +
                '<td><input type="hidden" name="specValIds" class="form-control" value="' + specValIds + '">' +
                '<input type="hidden" name="specValUrl" class="form-control" value="">' +
                '<input type="text" name="specValText" value="' + specValText + '" class="form-control" style="width: 300px;" readonly></td>' +
                '<td width="2"></td>' +
                '<td><i class="up fa fa-arrow-up" style="cursor:pointer;padding: 5px;" title="向上移动"></i>' +
                '<i class="down fa fa-arrow-down" style="cursor:pointer;padding: 5px;" title="向下移动"></i>' +
                '<i class="del fa fa-remove" style="cursor:pointer;padding: 5px;" title="删除"></i></td></tr>';

        }

        $("#specTab tbody").append(strSpc);
        binSpecEvent();
        function binSpecEvent(){
            $("#specTab .up").unbind("click").on("click",function(){
                var p=$(this).parent().parent();
                var nextTR = p.prev();
                if (nextTR.length > 0) {
                    nextTR.insertAfter(p);
                }
            });
            $("#specTab .down").unbind("click").on("click",function(){
                var p=$(this).parent().parent();
                var nextTR = p.next();
                if (nextTR.length > 0) {
                    nextTR.insertBefore(p);
                }
            });
            $("#specTab .del").unbind("click").on("click",function(){
                var tr=$("#specTab tbody").find("tr");
                if (tr.length > 0) {
                    $(this).parent().parent().remove();
                }
            });
        }

        var strParams ='';
        console.log("paramsList=====");
        console.log([[${paramsList}]]);
        for (o in [[${paramsList}]]){
            console.log("oooo=====");
            console.log(o);
            // console.log([[${paramsList}]]);
            // var params = [[${paramsList}]];
            // var specValIds ='';
            // var paramsName ='';
            // for(p in  params){
            //     paramsName +=params[p].name +',';
            //     // specValIds += params[p].id;
            // };
            // strParams +=
            //     '<tr align="center"  >'+
            //     '<td height="45">'+
            //     '<input type="text" name="group_name" value="'+[[${paramgList}]][o].name+'" class="form-control" data-parsley-required="true"></td>'+
            //     '<td width="2"></td><td><button type="button" class="btn btn-default"><i class="fa fa-plus mr5"></i>管理参数</button></td>'+
            //     '<td><input type="text" name="group_params" value="'+paramsName+'"  class="form-control" style="width: 200px;" readonly></td>'+
            //     '<td style="width: 80px;"><i class="up fa fa-arrow-up" style="cursor:pointer;padding: 5px;" title="向上移动"></i>'+
            //     '<i class="down fa fa-arrow-down" style="cursor:pointer;padding: 5px;" title="向下移动"></i>'+
            //     '<i class="del fa fa-remove" style="cursor:pointer;padding: 5px;" title="删除"></i></td>'+
            //     '</tr>';

            strParams +='<tr align="center"><td height="45">' +
                '<input type="text" name="group_params" value="'+[[${paramsList}]][o].name+'" class="form-control"></td>' +
                '<td width="2"></td>' +
                '<td><i class="up fa fa-arrow-up" style="cursor:pointer;padding: 5px;" title="向上移动"></i>' +
                '<i class="down fa fa-arrow-down" style="cursor:pointer;padding: 5px;" title="向下移动"></i>' +
                '<i class="del fa fa-remove" style="cursor:pointer;padding: 5px;" title="删除"></i></td></tr>';
        }
        $("#dialogParamTab tbody").append(strParams);
        binDialogGroupEvent();
        $("#dialogParamAdd").on("click",function(){
            $("#dialogParamTab tbody").append('<tr align="center"><td height="45">' +
                '<input type="text" name="group_params" class="form-control"></td>' +
                '<td width="2"></td>' +
                '<td><i class="up fa fa-arrow-up" style="cursor:pointer;padding: 5px;" title="向上移动"></i>' +
                '<i class="down fa fa-arrow-down" style="cursor:pointer;padding: 5px;" title="向下移动"></i>' +
                '<i class="del fa fa-remove" style="cursor:pointer;padding: 5px;" title="删除"></i></td></tr>');
            binDialogGroupEvent();
        });
        $("#specAdd").on("click",function(){
            layer.open({
                type:2,
                title:"选择规格",
                area : [ '400px', '450px' ],
                content:"/system/spec/spec"
            });
        });
        function binDialogGroupEvent(){
            $("#dialogParamTab .up").unbind("click").on("click",function(){
                var p=$(this).parent().parent();
                var nextTR = p.prev();
                if (nextTR.length > 0) {
                    nextTR.insertAfter(p);
                }
            });
            $("#dialogParamTab .down").unbind("click").on("click",function(){
                var p=$(this).parent().parent();
                var nextTR = p.next();
                if (nextTR.length > 0) {
                    nextTR.insertBefore(p);
                }
            });
            $("#dialogParamTab .del").unbind("click").on("click",function(){
                var tr=$("#dialogParamTab tbody").find("tr");
                if (tr.length > 0) {
                    $(this).parent().parent().remove();
                }
            });
        }
        // 参数 end
        function binSpecEvent(){
            $("#specTab .up").unbind("click").on("click",function(){
                var p=$(this).parent().parent();
                var nextTR = p.prev();
                if (nextTR.length > 0) {
                    nextTR.insertAfter(p);
                }
            });
            $("#specTab .down").unbind("click").on("click",function(){
                var p=$(this).parent().parent();
                var nextTR = p.next();
                if (nextTR.length > 0) {
                    nextTR.insertBefore(p);
                }
            });
            $("#specTab .del").unbind("click").on("click",function(){
                var tr=$("#specTab tbody").find("tr");
                if (tr.length > 0) {
                    $(this).parent().parent().remove();
                }
            });
        }
        function loadSpec(str) {
            $("#specTab tbody").append(str);
            binSpecEvent();
        }
    </script>


    <script type="text/javascript">
        var prefix = ctx + "system/type";
        $("#form-type-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-type-edit').serialize());
            }
        }
    </script>
</body>
</html>